<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<title>创生英语班级报告</title>
		<meta name="keywords" content="分享报告" />
		<meta name="description" content="分享报告" />
		<!-- miniMObile.css、js -->
		<link rel="stylesheet" type="text/css" href="css/miniMobile.css" />
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/miniMobile.js"></script>
		<script type="text/javascript" src="js/api.js"></script>
		<!-- fonticon -->
		<link rel="stylesheet" type="text/css" href="plugins/fonticon/iconfont.css" />
		<!-- animate.css -->
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />

		<style>
			body {
				background-color: #ffffff;
			}

			header {
				background-color: #FFFFFF;
			}

			header span {
				font-weight: bold;
				color: #535353;
			}
		</style>
		<style>

			.shareBtn {
			    background: #4581db;
			    display: block;
			    border-radius: 1.875rem;
			}
			
			.liNone {
				display: none;
			}

			/* .grid .box {
			border: 1px solid #f1f1f1;
		} */
			.english-star {
				border-bottom: 1px solid #f4f4f4;
			}
			
			/*css样式*/
			[v-cloak] {
				  display: none;
				}
		</style>
	</head>

	<body class="fadeIn animated">
		<div id="message" v-cloak>
			<header class="ui-header clearfix w75 h10 h8 f46 pl3 pr3 color8 t-c o-h" style="display: none;">
				<div class="ui-header-l fl w5">
					<img id="btn_back" @click="back()" src="img/ic_back_top.png" class="radius-o" style="line-height: 1rem;" />
				</div>

				<div class="ui-header-c f32 h10" style="line-height: 1rem;">
					<span>
						班级报告
					</span>
				</div>
			</header>
			<div class="grid t-c clearfix" style="color: #848484;line-height: 1rem;background-color: #f7faff;">
				<div class="box col-6 h10 f30">本次作业平均分<span style="color:#36c86b ;" v-cloak>{{avgscore}}</span></div>
				<div class="box col-6 h10 f30">本次作业最高分<span style="color:#36c86b ;" v-cloak>{{maxscore}}</span></div>
			</div>
			<!-- 英语之星----------------------------------------------- -->
			<div class="grid  clearfix english-star" style="line-height: 1rem;">
				<div class="grid clearfix" style="background: #FFFFFF;">
					<div class="box col-12 h10 f30"><span class="f30" style="color: #343d4a;font-weight: bold;margin-left: 0.3rem;">英语之星</span><span
						 class="f28" style="color: #848484;margin-left: 0.3rem;">成绩最好且用时最短(不含补做)</span></div>
				</div>
			</div>
			<div class="grid  clearfix">
				<div class="grid clearfix h33" style="background: #FFFFFF;">
					<div class="box t-c col-4 h33">
						<div class="t-c h20 w20" style="position: relative;left: 20%;top:23%" v-if="english_star2!== undefined && english_star2.img!==undefined">
							<img :src="english_star2.img" class="w11 h11 radius-o" style="position: absolute;left:10%;top:3%" />
							<img src="img/ic_no.2.png" class="w15 radius-o" style="position: absolute;left:0;top:0" />
						</div>

						<div class="f2" style="line-height: 0.5rem;margin-top: 0.2rem;" v-cloak>
							<p class="f30" style="color: #6a6a6a;" v-if="english_star2 != null">{{english_star2.username}}</span>
							<p class="f30" style="color: #6a6a6a;" v-if="english_star2 != null">{{english_star2.exam_score}}分</span>
						</div>
					</div>
					<div class="box t-c col-4 h33" style="background: #FFFFFF;">
						<div class="t-c h20 w20" style="position: relative;left: 10%;top:10%"  v-if="english_star1!== undefined && english_star1.img!==undefined">
							<img :src="english_star1.img" class="w15 h15 radius-o" style="position: absolute;left:11%;top:3.5%" />
							<img src="img/ic_no.1.png" class="w20 radius-o" style="position: absolute;left:0;top:0" />
						</div>

						<div class="f2" style="line-height: 0.5rem;margin-top: 0.2rem;" v-cloak>
							<p class="f30" style="color: #6a6a6a;" v-if="english_star1 != null">{{english_star1.username}}</span>
							<p class="f30" style="color: #6a6a6a;" v-if="english_star1 != null">{{english_star1.exam_score}}分</span>
						</div>

					</div>
					<div class="box t-c col-4 h33" style="background: #FFFFFF;">

						<div class="t-c h20 w20" style="position: relative;left: 20%;top:22%" v-if="english_star3!== undefined && english_star3.img!==undefined">
							<img :src="english_star3.img"  class="w11 h11 radius-o" style="position: absolute;left:10%;top:3%" />
							<img src="img/ic_no.3.png" class="w15 radius-o" style="position: absolute;left:0;top:0" />
						</div>

						<div class="f2" style="line-height: 0.5rem;margin-top: 0.2rem;" v-cloak>
							<p class="f30" style="color: #6a6a6a;" v-if="english_star3 != null">{{english_star3.username}}</span>
							<p class="f30" style="color: #6a6a6a;" v-if="english_star3 != null">{{english_star3.exam_score}}分</span>
						</div>
					</div>
				</div>
			</div>
			<div style="background-color: #f7faff;padding-top: 0.3rem;" id="div_score_90">
				<div class="grid  clearfix english-star" style="line-height: 1rem;">
					<div class="grid clearfix" style="background: #FFFFFF;">
						<div class="box col-12 h10 f30"><span class="f30" style="color: #343d4a;font-weight: bold;margin-left: 0.3rem;">90分及以上</span></div>
					</div>
				</div>
				<div class="grid  clearfix" style="line-height: 0.6rem;height: 0.6rem;">
					<div class="grid clearfix" style="background: #FFFFFF;">
						<div class="box col-12 h6 f30"><span style="color: #ff4a64;margin-left: 0.3rem;" v-cloak>{{full_nums}}</span><span class="f30"
							 style="color: #535353;">个学生满分</span></div>
					</div>
				</div>
				
				<section class="demo-nav t-c f28 clearfix" style="background: #FFFFFF;width: 100%;padding-bottom: 0.2rem;" v-cloak>
					<div class="col-3 t-c h5" style="line-height: 0.5rem;" v-for="item in full">
						<span style="background: #FFFFFF;color: #535353;">{{item.username}}</span>
					</div>
				</section>
				
				<div class="grid  clearfix" style="line-height: 0.6rem;height: 0.6rem;">
					<div class="grid clearfix" style="background: #FFFFFF;">
						<div class="box col-12 h6 f30"><span style="color: #ff4a64;margin-left: 0.3rem;" v-cloak>{{ninety_nums}}</span><span class="f30"
							 style="color: #535353;">个学生90分及以上</span></div>
					</div>
				</div>
				
				<section class="demo-nav t-c f28 clearfix" style="background: #FFFFFF;width: 100%;" v-cloak>
					<div class="col-3 t-c h5" style="line-height: 0.5rem;" v-for="item in ninety1">
						<span style="background: #FFFFFF;color: #535353;">{{item.username}}</span>
					</div>
				</section>
				<section class="demo-nav t-c f28 clearfix liNone isClass" style="background: #FFFFFF;width: 100%;padding-bottom: 0.2rem;" v-cloak>
					<div class="col-3 t-c h5" style="line-height: 0.5rem;" v-for="item in ninety2">
						<span style="background: #FFFFFF;color: #535353;">{{item.username}}</span>
					</div>
				</section>
				
				<div class="grid t-c  clearfix" style="line-height: 0.6rem;height: 0.6rem;margin-bottom: 0.3rem;" v-show="ninetyShow">
					<div class="grid clearfix" style="background: #FFFFFF;">
						<div class="box col-12 h6 f28 showAll1" style="color: #36c86b;">展开全部<img src="img/ic_zhankaigreenxia.png" class="w3 h1.5"
							 style="margin-left: 0.1rem;" /></div>
					</div>
				</div>
				
			</div>
			
			<!-- 英语之星----------------------------------------------- -->


			<!-- 积极之星----------------------------------------------- -->
			<div style="background-color: #f7faff;padding-top: 0.3rem;">
			<div class="grid  clearfix english-star" style="line-height: 1rem;">
				<div class="grid clearfix" style="background: #FFFFFF;">
					<div class="box col-12 h10 f30"><span class="f30" style="color: #343d4a;font-weight: bold;margin-left: 0.3rem;">积极之星</span><span
						 class="f28" style="color: #848484;margin-left: 0.3rem;">最早完成且成绩高于班均(不含补做)</span></div>
				</div>
			</div>
			<div class="grid  clearfix">
				<div class="grid clearfix h33" style="background: #FFFFFF;">
					<div class="box t-c col-4 h33">
						<div class="t-c h20 w20" style="position: relative;left: 20%;top:23%"  v-if="positive_star2!== undefined && positive_star2.img!==undefined">
							<img :src="positive_star2.img" class="w11 h11 radius-o" style="position: absolute;left:10%;top:3%" />
							<img src="img/ic_no.2.png" class="w15 radius-o" style="position: absolute;left:0;top:0" />
						</div>

						<div class="f2" style="line-height: 0.5rem;margin-top: 0.2rem;" v-cloak>
							<p class="f30" style="color: #6a6a6a;" v-if="positive_star2 != null" >{{positive_star2.username}}</span>
								<p class="f30" style="color: #6a6a6a;" v-if="positive_star2 != null">{{positive_star2.exam_score}}分</span>
						</div>
					</div>
					<div class="box t-c col-4 h33" style="background: #FFFFFF;">
						<div class="t-c h20 w20" style="position: relative;left: 10%;top:10%"  v-if="positive_star1!== undefined && positive_star1.img!==undefined">
							<img :src="positive_star1.img" class="w15 h15 radius-o" style="position: absolute;left:11%;top:3.5%" />
							<img src="img/ic_no.1.png" class="w20 radius-o" style="position: absolute;left:0;top:0" />
						</div>

						<div class="f2" style="line-height: 0.5rem;margin-top: 0.2rem;" v-cloak>
							<p class="f30" style="color: #6a6a6a;" v-if="positive_star1 != null">{{positive_star1.username}}</span>
								<p class="f30" style="color: #6a6a6a;" v-if="positive_star1 != null">{{positive_star1.exam_score}}分</span>
						</div>

					</div>
					<div class="box t-c col-4 h33" style="background: #FFFFFF;">

						<div class="t-c h20 w20" style="position: relative;left: 20%;top:22%"  v-if="positive_star3!== undefined && positive_star3.img!==undefined">
							<img :src="positive_star3.img" class="w11 h11 radius-o" style="position: absolute;left:10%;top:3%" />
							<img src="img/ic_no.3.png" class="w15 radius-o" style="position: absolute;left:0;top:0" />
						</div>

						<div class="f2" style="line-height: 0.5rem;margin-top: 0.2rem;" v-cloak>
							<p class="f30" style="color: #6a6a6a;" v-if="positive_star3 != null">{{positive_star3.username}}</span>
								<p class="f30" style="color: #6a6a6a;" v-if="positive_star3 != null">{{positive_star3.exam_score}}分</span>
						</div>
					</div>
				</div>
			</div>
			</div>
			
			<div style="background-color: #f7faff;padding-top: 0.3rem;"  id="div_works_notf">
			<div class="grid  clearfix english-star" style="line-height: 1rem;">
				<div class="grid clearfix" style="background: #FFFFFF;">
					<div class="box col-12 h10 f30"><span class="f30" style="color: #343d4a;font-weight: bold;margin-left: 0.3rem;">作业未完成</span></div>
				</div>
			</div>
			<div class="grid  clearfix" style="line-height: 0.6rem;height: 0.6rem;">
				<div class="grid clearfix" style="background: #FFFFFF;">
					<div class="box col-12 h6 f30"><span style="color: #ff4a64;margin-left: 0.3rem;" v-cloak>{{not_finished_nums}}</span><span
						 class="f30" style="color: #535353;">个学生没有按时完成</span></div>
				</div>
			</div>

			<section class="demo-nav t-c f28 clearfix" style="background: #FFFFFF;width: 100%;padding-bottom: 0.2rem;" v-cloak>
				<div class="col-3 t-c h5" style="line-height: 0.5rem;" v-for="item in not_finished">
					<span style="background: #FFFFFF;color: #535353;">{{item.username}}</span>
				</div>
			</section>
			</div>
			<!-- 积极之星----------------------------------------------- -->


			<div class="t-c h10" style="background-color: #FFFFFF;line-height: 1rem;color:#FFFFFF;visibility: hidden;" @click="Share()">
				<div style="padding-bottom: 0.2rem;background-color: #FFFFFF;padding-top: 0.2rem;padding-left: 0.3rem;padding-right: 0.3rem;">
					<a href="javascript:;" class="shareBtn f28" style="color: #FFFFFF;">分享报告</a>
				</div>

			</div>
		</div>
	</body>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js"></script>
	<!-- 百度 CDN: -->
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#message',
			data: {
				params: getQueryString("params"),
				terminal: '',
				avgscore: '0',
				maxscore: '0',
				full_nums: '0',
				ninety_nums: '0',
				not_finished_nums: '0',
				full: [], //满分
				ninety: [], //90分以上
				english_star1: [], //英语之星1
				english_star2: [], //英语之星2
				english_star3: [], //英语之星3
				ninety1: [], //完成
				ninety2: [],
				not_finished: [], //未完成
				positive_star: [], //积极之星
				positive_star1: [], //积极之星1
				positive_star2: [], //积极之星2
				positive_star3: [], //积极之星3
				ninetyShow: false, //标记是否显示展开更多
				imgUrl:"img/ic_no.3.png",
			},
			mounted: function() {
				this.isterminal();
				this.weekInfo();
			},
			methods: {
				//判断 android ios
				isterminal: function() {
					if (browser.versions.iPhone || browser.versions.iPad) {
							$("#header").hide();
					}
				},
				weekInfo: function() {
					
					var b = new Base64();
					var str = b.decode(this.params);
					var objParams = JSON.parse(str);
					console.log(objParams);
					//分享报告请求方法
					this.$http.post(shareInfoApi, objParams, {
						emulateJSON: true
					}).then(function(res) {
						if (res.data.error_code == 200) {
							// console.log(res.data.data)
							let shareInfo = res.data.data;
							
							console.log(shareInfo);
							
							this.avgscore = Math.floor(shareInfo.avgscore * 100) / 100;
							this.maxscore = Math.floor(shareInfo.maxscore * 100) / 100;
							this.full = shareInfo.full; //满分
							this.ninety = shareInfo.ninety; //90分以上
							this.english_star1 = shareInfo.english_star[0]; //英语之星
							this.english_star2 = shareInfo.english_star[1];
							this.english_star3 = shareInfo.english_star[2];
							this.finished = shareInfo.finished; //已完成		
							this.not_finished = shareInfo.not_finished; //未完成
							this.positive_star = shareInfo.positive_star; //积极之星
							this.positive_star1 = shareInfo.positive_star[0]; //积极之星1
							this.positive_star2 = shareInfo.positive_star[1]; //积极之星2
							this.positive_star3 = shareInfo.positive_star[2]; //积极之星3
							this.full_nums = shareInfo.full_nums; //满分人数
							this.ninety_nums = shareInfo.ninety_nums; //90分人数
							this.not_finished_nums = shareInfo.not_finished_nums; //未完成
							//90分先展示4个-------------------------
							for (var i = 0; i < 4; i++) {
								if (this.ninety[i] != undefined) {
									this.ninety1.push(this.ninety[i]);
								}
							}
							//90分隐藏部分
							for (var i = 3; i < this.ninety.length; i++) {
								if (this.ninety[i] != undefined) {
									this.ninety2.push(this.ninety[i]);
								}
							}
							if (this.ninety2 != undefined && this.ninety2.length > 0) {
								this.ninetyShow = true;
							} else {
								this.ninetyShow = false;
							}
							//90-------------------------

							if(this.ninety_nums <= 0){
								$("#div_score_90").hide();
							}
							if(this.not_finished_nums <= 0){
								$("#div_works_notf").hide();
							}

						} else {
							//请求错误
							window.android.errorMsg(res.data.info);
						}
					}).catch(e => {
						// 打印一下错误
						console.log(e);
					})
				},
				back : function() {
					if (browser.versions.android) {
						console.log('-------------------打印成功，走了调用安卓分享---------------------');
						AndroidBack.onX5ButtonClicked();
					}
				}
			}
		});

		$(function() {
			var flag = true;
			var off = true;
			$('.showAll1').on('click', function() {
				if (flag) {
					$('.liNone').slideDown().removeClass('liNone');
					$(this).text('收回全部');
					flag = false;
				} else {
					$('.isClass').slideUp().addClass('liNone');
					$(this).text('展开全部');
					flag = true;
				}
			});

		});
	</script>
</html>
